import React from "react";
import { dndTypes } from "../../../../constants";
import { DropTarget } from 'react-dnd';
import TreeNode from './TreeNode';

const collect = (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver()
});
@DropTarget(dndTypes.TABLE, {}, collect)
export default class TableTree extends React.Component {
    renderNode(node) {
        const { onDrop, onRemove, onNodeOptClick, onRelatedFieldsChange, onJoinTypeChange, addedTableName } = this.props;

        return (
            <TreeNode ecId={`${this && this.props && this.props.ecId || ''}_TreeNode@vzromd`}
                node={node}
                key={node.id}
                onDrop={onDrop}
                onRemove={onRemove}
                onOptClick={onNodeOptClick}
                onJoinTypeChange={onJoinTypeChange}
                onRelatedFieldsChange={onRelatedFieldsChange}
            >
                {node.children.map(n => this.renderNode(n))}
            </TreeNode>
        );
    }
    render() {
        const { data } = this.props;
        const node = data[0];

        if (!node) return null;
        return this.renderNode(node);
    }
}